<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="webkit" name="renderer" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<base href="<%=basePath%>">

<title>基于WEB的人脸识别考勤系统——控制台</title>

<!-- Bootstrap core CSS -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css"
	rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="assets/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

<link rel="stylesheet" href="layui/css/layui.css" media="all">

<script src="tracking/build/tracking-min.js"></script>
<script src="tracking/build/data/face-min.js"></script>


</head>

<body style="margin-top: 30px;">
	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#navbar" aria-expanded="false"
				aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand">人脸识别考勤系统检测端	</a>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-right">
				<li><a onclick="getScheduler()">时间表</a></li>
				<li><a href="index.action">主页</a></li>
				<li><a href="main.action">控制台</a></li>
				<li><a onclick="changeclass()">变更班级</a></li>
				<% if(session.getAttribute("loginTid") == null || session.getAttribute("loginTid") == ""){ %>
				<li id="user"><a href="loginpage.action">登录</a></li>
				<% }else{ %>
				<li id="user" onclick="logout()"><a><%=session.getAttribute("loginTname") %>-登出</a></li>
				<% } %>
			</ul>
		</div>
	</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-4 col-md-5 col-sm-12" id="detection">
				<h1 class="page-header">检测/<span class="text-muted">Detection</span></h1>
				<!-- 
				<div class="demo-container center-block">
					<div style="background: #eee; width: 320px; height: 240px; position: absolute; top: 0px;"></div>
					<video id="video" width="320" height="240" preload autoplay loop muted></video>
					<canvas id="canvas" width="320" height="240"></canvas>
					<img class="scanf" alt="" src="img/scanf.png" style="width: 320; height: 240px; position: absolute;">
					<span id="trackerState">待机中</span>
				</div> -->
				
				<div class="layui-card" style="margin-top: 30px;">
					<div class="layui-card-header">摄像系统<span id="trackerState">待机中</span></div>
					<div class="layui-card-body">
				    	<div class="demo-container center-block">
							<div style="background: #eee; width: 320px; height: 240px; position: absolute; top: 0px;"></div>
							<video id="video" width="320" height="240" preload autoplay loop muted></video>
							<canvas id="canvas" width="320" height="240"></canvas>
							<img class="scanf" alt="" src="img/scanf.png" style="width: 320; height: 240px; position: absolute;">
						</div>
					</div>
				</div>
				
				<div class="layui-card">
					<div class="layui-card-header">信息<span id="nowTime">当前时间</span></div>
					<div class="layui-card-body">
						<div class="layui-row">
							<div class="layui-col-md6 layui-col-xs6" id="infoView"></div>
							<div class="layui-col-md6 layui-col-xs6" id="infoView2"></div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline" style="width:140px; margin-right: 10px;">
									<input type="text" id="esid" placeholder="请输入学号" autocomplete="off" class="layui-input">
								</div>
								<div class="layui-input-inline" style="width:100px">
									<button class="layui-btn" onclick="record()">手动签到</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div style="background: #eee">
					
				</div>
			</div>
			<div class="col-lg-8 col-md-7 col-sm-12">
				<h1 class="page-header">
					签到列表/<span class="text-muted">Attendance sheet</span>
					<button class="layui-btn layui-btn-xs" id="leave">签离</button>
					<button class="layui-btn layui-btn-primary layui-btn-xs" style="right: 30px;" id="refresh">
				  		<i class="layui-icon layui-icon-refresh-3"></i>刷新
				  	</button>
				</h1>
				<div class="detection-table">
					<table id="recordlist" lay-filter="test"></table>
				</div>
				
			</div>
		</div>
	</div>
	
	<form class="layui-form" id="changeclassView" lay-filter="changeclassView" action="" style="display: none; padding: 20px 20px 0px 20px;">
		<div class="layui-form-item">
			<p>请输入班级名（测试请使用“教技1511”）</p>
		</div>
		<div class="layui-form-item">
			<input type="text" id="classname" placeholder="请输入" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-form-item" style="text-align: right;">
			<button class="layui-btn layui-btn-sm" type="submit">提交</button>
		</div>
	</form>
	
	<table class="layui-table" lay-size="sm" style="display: none; width: 270px; margin-left: 10px;" id="timeView"></table>
	
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
	<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
	<script src="assets/js/vendor/holder.min.js"></script>
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
	<script src="js/detection.js"></script>
	<script src="layui/layui.js"></script>
	<script>
		var video = document.getElementById('video');
		let canvas = document.getElementById('canvas');
		let context = canvas.getContext('2d');
        function trackerStart() {
          var video = document.getElementById('video');
          var tracker = new tracking.ObjectTracker('face');
          tracker.setInitialScale(4);
          tracker.setStepSize(2);
          tracker.setEdgesDensity(0.1);
		
          var trackerTask = tracking.track(video, tracker, { camera: true });
          
          tracker.on('track', function(event) {
          
          	context.clearRect(0, 0, canvas.width, canvas.height);
          	
            event.data.forEach(function(rect) {
            	context.strokeStyle = '#31B0D5';
              	context.strokeRect(rect.x, rect.y, rect.width, rect.height);
              	context.font = '11px Helvetica';
              	context.fillStyle = "#fff";
              	context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
              	context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
              	//摄像头分辨率640x480
              	var trackerStr = $("#trackerState").text();
              	if(trackerStr=="待机中" || trackerStr=="距离太远，请靠近"){
              		//alert(trackerStr);
	              	if(rect.width>130){
	              		setTrackerState(1);
	              		recognition(csid, nowlesson);
	              	} else setTrackerState(5);
              	}
            });
          }); 
		  		
		  
      	};   
      	
    </script>
    <script>
    var csid;
    var nowlesson;
	var tableIns;
	var refreshlink;
	var getScheduler;
    
	layui.use(['table','form','layer','laytpl'], function(){
	  var table = layui.table;
	  var form = layui.form;
	  var layer = layui.layer;
	  var laytpl = layui.laytpl;
	  
	  var classname = '<%=session.getAttribute("className")%>';
	  var classid = '<%=session.getAttribute("classId")%>';
	  
	  $('#refresh').on('click', function(){
		tableIns.reload();
		layer.msg('刷新完了');
		refreshinfo();
	  });
	  
	  $.ajax(
	  {
		type:"post",
		url:"course/getCourseBySclass.action",
		dataType:"json",
		data:{
			classname: classname
		},success:function(result){
			var data = result.bean;
			switch(result.code){
				case 0:
					layer.msg(result.msg);
					break;
				case 1:
				case 2:
				case 3:
				case 4:
					layer.confirm('ERROR：' + result.msg + '<br>该班级无法进入检测界面，你可以进入控制台（需登录）或者尝试更换检测班级 ', {
					  	btn: ['进入控制台','变更班级'] //按钮
					}, function(){
					  	window.location.href = "main.action"
					}, function(){
						// 弹窗操作
						changeclass();
					});
					break;
				case 5:
					
					
					tableIns = table.render({
					    elem: '#recordlist'
					    ,height: 555
					    ,url: 'record/findDetRecByPage.action?cidSublevel=' +data.cidSublevel + '&classid=' + classid //数据接口
					    //,page: true //开启分页
					    ,limit: 120
					    ,cols: [[ //表头
					      {field: 'sid', title: '学生ID', sort: true, minWidth:120}
						  ,{field: 'sname', title: '姓名', width:90}
					      ,{field: 'cname', title: '课程名', minWidth:120, sort: true}
					      ,{field: 'flaginfo', title: '状态', width:80, sort: true} 
					      ,{field: 'createdateStr', title: '操作时间', minWidth: 170, sort: true}
					    ]]
					});
					
					csid = data.cidSublevel;
					nowlesson = data.nowlesson;
					
					var infoView = document.getElementById('infoView'); 
				  	var infoContent = document.getElementById('infoContent');
					laytpl(infoContent.innerHTML).render(data, function (html) {
						//赋值
						infoView.innerHTML = html;
					});
					
					refreshlink();
					
					// 启动人脸追踪器
					trackerStart();
					
					break;
			}
					
		}
	  });
	  
	  //监听提交
  	  form.on('submit(changeclassView)', function(d){
 		var data = d.field;
 		var changeclassname = $('#classname').val();
		$.ajax(
		{
			type:"post",
			url:"course/setClass.action",
			dataType:"json",
			data:{
				classname: changeclassname
			},success : function(result){
				switch(result.code){
				case 0:
				case 1:
				case 2:
					layer.msg(result.msg);
					break;
				case 3:
					layer.msg(result.msg);
					location.reload();
					break;
				}
			}
		});
		return false;
  	  });
	  
	  // 刷新信息
	  refreshlink = function refreshinfo(){
	  	$.ajax(
		{
			type:"post",
			url:"record/getRecordNum.action",
			dataType:"json",
			data:{
				cidSublevel: csid,
				classid: classid
			},success : function(result){
				var infoView2 = document.getElementById('infoView2'); 
				var infoContent2 = document.getElementById('infoContent2');
				laytpl(infoContent2.innerHTML).render(result, function (html) {
					//赋值
					infoView2.innerHTML = html;
				});
			}
		});
	  }
	  
	  
	  $('#leave').on('click', function(){
		layer.confirm('签离功能会将本堂课所有“已到”同学标记为“早退”状态，必须再次签到才能将状态恢复为“已到”<br>此操作无法撤销，为了避免不必要的时间浪费，请慎重考虑', {
			title: '警告'
			,btn: ['启动签离功能','取消'] //按钮
		}, function(){
			layer.confirm('签离功能现在可以给迟到的同学一次机会，将他们也标记为早退状态，再次签到后可以标记为已到，您是否给迟到同学这个机会？<br><br>是：已到、迟到 => 早退<br>否：已到 => 早退', {
				title: '签离拓展功能'
				,btn: ['是','否'] //按钮
			}, function(){
				leave(2);
			}, function(){
				leave(1);
			});
		}, function(){

		});
	  });
	  
	  function leave(flag){
	  	$.ajax(
		{
			type:"post",
			url:"record/updateDetRecord.action",
			dataType:"json",
			data:{
				cidSublevel: csid,
				flag: flag
			},success : function(result){
				tableIns.reload();
				layer.msg(result.msg);
				refreshinfo();
			}
		});
	  }
	  
	getScheduler = function getScheduler(){
	    $.ajax(
		{
			type:"post",
			url:"time/getScheduler.action",
			dataType:"json",
			success : function(result){
				// 渲染视图层
				var timeView = document.getElementById('timeView'); 
				var timeContent = document.getElementById('timeContent');
				laytpl(timeContent.innerHTML).render(result.data, function (html) {
					//赋值
					timeView.innerHTML = html;
				});
			}
		});
		
		// 弹窗
		layer.open({
			type: 1
			,title :'时间表'
		    ,offset: 'auto'
			,area: ['290px', '530px']
			,id: 'edit' //防止重复弹出
			,content: $("#timeView")
			,shade: 0 //不显示遮罩
			,btn:'关闭'
		});
    }
	  
	  
	});
	
	
	function changeclass(){
	  	layer.open({
			type: 1
			,title :'变更班级'
			,offset: 'auto' 
			,id: 'changeclass' //防止重复弹出
			,content: $("#changeclassView")
		});
	}
	
	function record(){
	  	var esid = $('#esid').val();
	  	if(esid == null || esid == ''){
	  		layer.msg('请输入学号');
	  	} else {
		  	$.ajax(
			{
				type:"post",
				url:"record/add.action",
				dataType:"json",
				data:{
					sid: esid,
					cidSublevel: csid,
					lesson: nowlesson
				},
				success:function(result){
					if(result.code == 0){
						layer.msg(result.msg);
						setTrackerState(3);
					} else if(result.code == 1){
						tableIns.reload();
						layer.msg(result.msg);
						setTrackerState(2);
					} else if(result.code == 2){
						layer.msg(result.msg);
						setTrackerState(4);
					} else if(result.code == 3){
						layer.msg(result.msg);
						setTrackerState(3);
					}
					refreshlink();
					
			    }
			});
	  	}
		
	  }
	  
	function logout(){
		layer.confirm('您确定登出吗？', {
			title: '信息'
			,btn: ['是','否'] //按钮
		}, function(){
			$.ajax(
			{
				type:"get",
				url:"logout.action",
				success : function(result){
					layer.msg(result.msg);
					$("#user").html("<a href=\"loginpage.action\">登录</a>");
				}
			});
		}, function(){
			
		});
	}
	</script>
	<script type="text/javascript">
	showTime();
	function showTime(){
	var date = new Date(); //日期对象
	var now = "";
	now = date.getFullYear()+"年"; //读英文就行了
	now = now + (date.getMonth()+1)+"月"; //取月的时候取的是当前月-1如果想取当前月+1就可以了
	now = now + date.getDate()+"日  ";
	now = now + date.getHours()+":";
	now = now + date.getMinutes()+":";
	now = now + date.getSeconds();
	document.getElementById("nowTime").innerHTML = now; //div的html是now这个字符串
	setTimeout("showTime()",1000); //设置过1000毫秒就是1秒，调用show方法
	}
	</script>
	<script type="text/html" id="infoContent">
		当前班级：<%=session.getAttribute("className")%><br>
		适用安排：{{d.cidSublevel}} 第{{d.nowweeknum}}周<br>
		任课教师：{{d.tname}}<br>
		当前节数：第{{d.nowlesson}}节课<br>
		当前课程：{{d.cname}}
	</script>
	<script type="text/html" id="infoContent2">
		班级人数：{{d.snum}}<br>
		已到人数：{{d.yidao}}<br>
		迟到人数：{{d.chidao}}<br>
		未到人数：{{d.weidao}}<br>
		早退人数：{{d.zaotui}}<br>
	</script>
	<script type="text/html" id="timeContent">
	<colgroup>
		<col>
		<col>
		<col>
		<col>
	</colgroup>
	<thead>
		<tr>
			<th>课程节数</th>
			<th>上课时间</th>
			<th>下课时间</th>
		</tr> 
	</thead>
	<tbody>
	{{#  layui.each(d, function(index, item){ }}
	<tr>
		<td>{{ item.lesson }}</td>
		<td>{{ item.start }}</td>
		<td>{{ item.end }}</td>
	</tr>
	{{#  }); }}
	</tbody>
	</script>
</body>
</html>
